<!-- 房屋管理 -->
<template>
	<div>
	  <div class="header">
		<div class="title">
		  <div style="float: right; width: 27%">
			<a-space style="float: right; margin-right: 10px; margin-top: 15px; margin-bottom: 15px">
			  <a-button type="primary" @click="handleExport"> 导出 </a-button>
			</a-space>
		  </div>
		</div>
		<a-table
		  style="margin-top: 0px"
		  :dataSource="tableData"
		  :columns="displayColumns"
		  :pagination="false"
		  :scroll="{ x: 1500, y: tableHeight }"
		  bordered
		  :loading="loading"
		/>
		<div class="pagination" style="float: right">
		  <a-pagination
			show-size-changer
			v-model:current="pageIndex"
			v-model:pageSize="pageSize"
			:total="total"
		  />
		</div>
	  </div>
	</div>
  </template>
  
  <script lang="ts" setup>
	import { ref, reactive, toRefs, onMounted, onBeforeMount, computed, watch } from 'vue';
	import { getcdfslist } from '/@/api/demo/hoursebase'; //统计工作进展
	import { useUserStore } from '/@/store/modules/user';
	import { iTableData, iTableColumns } from './types/table';
	import { iParams } from './types/params';
	import { useGlobSetting } from '/@/hooks/setting';
	import { downloadByUrl } from '/@/utils/file/download';
	//   import Detail from './component/detailDrawer.vue';
	const userStore = useUserStore();
	const globSetting = useGlobSetting();
	let userInfo = ref<any>(null);
	let detailTableHeight = ref<number>(0); // 表格高度
	let tableHeight = ref<number>(0); // 表格高度
	let pageIndex = ref(1);
	let pageSize = ref(50);
	let total = ref(0);
	let loading = ref(true);
	let data = reactive<{
	  tableData: iTableData[];
	  tableColumns: iTableColumns[];
	  wscolsList: { wch: number }[];
	  id: number | any;
	  keyWorld: String;
	  currentqx: string; // 当前行政区名称
	  currentTitle: string;
	  cityToken: string | any;
	}>({
	  // 表格数据
	  tableData: [],
	  tableColumns: [
		{
		  title: '序号',
		  dataIndex: 'index',
		  key: 'index',
		  align: 'center',
		  width: 80,
		},
		{
		  title: '区名称',
		  dataIndex: 'xzq',
		  key: 'xzq',
		  align: 'center',
		  width: 80,
		},
		{
		  title: '单插口',
		  dataIndex: 'dchak',
		  key: 'dchak',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '集中充电桩',
		  dataIndex: 'jzcdz',
		  key: 'jzcdz',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '单仓口',
		  dataIndex: 'dcangk',
		  key: 'dcangk',
		  align: 'center',
		  width: 150,
		},
		{
		  title: '充(换)电柜',
		  dataIndex: 'cdg',
		  key: 'cdg',
		  align: 'center',
		  width: 170,
		},
		{
		  title: '其他',
		  dataIndex: 'qt',
		  key: 'qt',
		  align: 'center',
		  width: 150,
		},
	  ],
	  id: null,
	  keyWorld: '',
	  cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
	  currentqx: '', // 当前行政区名称
	  currentTitle: '', // 当前详情标题
	  wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
	});
	// 表格的 ref Dom名称
	let { tableData } = toRefs(data);
	  
	async function getData() {
	  const { role } = userInfo.value;
	  let groupname = '';
	  if (role === 'City') {
		groupname = 'qxmc';
	  } else if (role === 'Area') {
		groupname = 'jzmc';
	  } else if (role === 'Street') {
		groupname = 'czmc';
	  }
	  let params: iParams = {
		groupname: groupname,
		pageIndex: pageIndex.value,
		pageSize: pageSize.value,
	  };
	  console.log('@res--工作进入汇总表', params);
	  loading.value = true;
	  let res = await getcdfslist(params);
	 console.log('@res--工作进入汇总表', res.items);
	  if (res || res.items.length > 0) {
		let dchak = vtotal(res.items, 'dchak');
		let jzcdz = vtotal(res.items, 'jzcdz');
		let dcangk = vtotal(res.items, 'dcangk');
		let index_count = res.items.length + 1;
		let cdg = vtotal(res.items, 'cdg');
		let qt = vtotal(res.items, 'qt');
		let allObj = {
		  xzq: '汇总',
		  dchak: dchak,
		  jzcdz: jzcdz,
		  dcangk: dcangk,
		  index: index_count,
		  cdg: cdg,
		  qt: qt,
		};
		loading.value = false;
		data.tableData = [...res.items, allObj];
		total.value = res.total;
	  }
	}
	function vtotal(arr: any, item: any) {
	  let total = arr.reduce((pre: any, cur: any) => {
		return parseInt(pre) + parseInt(cur[item]);
	  }, 0);
	  return total;
	}
	function getUserInfo() {
	  const userStore = useUserStore();
	  userInfo.value = userStore?.getUserInfo;
	}
  
	const displayColumns = computed(() => {
	  const { role } = userInfo.value;
	  let arr: any[] = [];
	  if (role === 'City') {
		// qx
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
		return arr;
	  } else if (role === 'Area') {
		// jz
		arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
		return arr;
	  } else if (role === 'Street') {
		// cun
		arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
		console.log('@Aarr', arr);
		return arr;
	  } else {
		return data.tableColumns;
	  }
	});
	function handleExport() {
	  const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
	  const tk = userStore.getToken;
	  downloadByUrl({
		url: uriBase + '/static/cdfs/cdfsExportExcel?access_token=' + tk,
		target: '_blank',
	  });
	}
  
	const getTableHeight = () => {
	  setTimeout(() => {
		detailTableHeight.value = window.innerHeight;
		tableHeight.value = window.innerHeight;
	  });
	};
	watch(pageSize, () => {
	  console.log('pageSize', pageSize.value);
	  getData();
	});
	watch(pageIndex, () => {
	  console.log('current', pageIndex.value);
	  getData();
	});
	onBeforeMount(() => {
	  getUserInfo();
	});
	onMounted(() => {
	  console.log('******数据初始化******');
	  getData();
	  getTableHeight();
	  // getTableData();
	});
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">
	#map {
	  height: calc(100vh - 140px);
	}
	.x-houseMng-search {
	  z-index: 100;
	  margin: 6px;
	  position: absolute;
	}
	.root-house-mng-main {
	  margin: 6px;
	}
	.x-village-tabs {
	  //z-index: 100;
	  //position: absolute;
	  width: 60vw;
	  margin-top: 6px;
	  margin-left: 40px;
	  //background-color: rgba(34, 34, 34, 0.6);
	  :deep(.ant-form) {
		margin-top: 6px;
	  }
	}
	.ant-table-thead > tr > th,
	.ant-table-tbody > tr > td,
	.ant-table tfoot > tr > th,
	.ant-table tfoot > tr > td {
	  padding: 12px 16px !important;
	}
  </style>
  